<template>
  <div class="ranking-list">
    <a-table
      v-if="dataList?.length"
      :scroll="tableScroll"
      style="min-height: 650px"
      :columns="tableColumns"
      :data-source="dataList"
      :pagination="false"
    />

    <my-infinite-loading :empty="dataList?.length === 0" :identifier="identifier" :show-bottom-text="false" @infinite="loadData">
      <template #empty>
        <div class="empty">暂无数据</div>
      </template>
    </my-infinite-loading>
    <!--  -->
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { useRoute } from 'vue-router'

  import { hitContestApi } from '@/services/api'
  import { filterTableColumns } from '@/utils'

  export interface PageForm {
    offset: number
    limit: number
    id: string
  }

  const route = useRoute()

  const taskId = route.params.id as string

  const tableColumns = ref(
    filterTableColumns([
      {
        title: '排名',
        dataIndex: 'recordRank',
        fixed: 'left',
        width: 80
      },
      {
        title: '参与者',
        dataIndex: 'userName',
        fixed: 'left',
        width: 120
      },
      {
        title: '最优成绩提交时间',
        dataIndex: 'createTime',
        fixed: 'left',
        width: 160
      },
      {
        title: '分数',
        dataIndex: 'score',
        width: 180
      }
    ])
  )

  const tableScroll = computed(() => {
    const scrollX = tableColumns.value.reduce((prev, curr) => {
      return prev + (curr.width as number)
    }, 0)
    return scrollX > 1022 ? { x: scrollX } : undefined
  })

  const dataList = ref<any[]>([])
  const identifier = ref<number>(1)
  const pageForm = ref<PageForm>({
    offset: 1,
    limit: 12,
    id: taskId
  })
  const loadData = async ($state: any) => {
    try {
      const {
        data: { records }
      } = await hitContestApi.rankList(pageForm.value)
      if (records.length < pageForm.value.limit) {
        $state.complete()
      } else {
        pageForm.value.offset++
        $state.loaded()
      }
      let listHead = records?.[0]?.listHead || []
      if (listHead.length) {
        for (let index = 0; index < listHead.length; index++) {
          const element = listHead[index]
          tableColumns.value.push({
            title: element,
            dataIndex: element,
            width: 180
          })
        }
      }
      const list: any[] = records.map((record: any) => {
        let composition = record?.composition || ''
        composition = composition && JSON.parse(composition)
        // 数组转对象
        composition =
          composition &&
          composition.reduce((prev: any, curr: any) => {
            return {
              ...prev,
              [curr.name]: curr.values
            }
          }, {})
        return {
          ...record,
          ...composition
        }
      })
      dataList.value.push(...list)
    } catch (error) {
      console.log(error)
      $state.error()
    }
  }
</script>

<style lang="less" scoped>
  .ranking-list {
    position: relative;

    .empty {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1026px;
      height: 670px;
      font-size: 14px;
      color: rgba(17, 22, 31, 0.52);
      background: #fff;
      border: 1px solid #e8e9eb;
      border-radius: 10px;
      font-weight: 400;
      line-height: 22px;
    }
  }
</style>
